<template>
  <div class="app-container">
    <div>
      <el-button type="primary" plain size="small" icon="el-icon-plus">
        新建库位
      </el-button>
      <el-button type="primary" plain size="small" icon="el-icon-plus">
        新建配对
      </el-button>
      <el-button type="primary" plain size="small" icon="el-icon-plus">
        导入库位
      </el-button>
      <el-button type="primary" plain size="small" icon="el-icon-plus">
        导入配对
      </el-button>
      <el-button type="primary" plain size="small" icon="el-icon-plus">
        导⼊库位配对和初始数量(会刷新⼊库量和出库量)
      </el-button>
    </div>
    <!-- *************************************搜索区************************************* -->
    <el-form
      style="margin-top: 15px"
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
    >
      <!-- 分类 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="分类"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 属性 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="属性"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 品牌 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="品牌"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 状态 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="状态"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 产品标签 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
          placeholder="产品标签"
        >
          <el-option v-for="item in 10" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 时间选择 -->
      <el-form-item>
        <el-select
          size="mini"
          style="width: 100px"
          v-model="queryParams.value1"
        >
          <el-option label="创建时间" value="item"> </el-option>
        </el-select>
        <el-date-picker
          style="top: 1px; border-radius: 0; border-left: none"
          size="mini"
          type="daterange"
          v-model="queryParams.value1"
          range-separator="➡️"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 搜索内容 -->
      <el-form-item>
        <el-input
          style="top: 3px"
          size="mini"
          placeholder="请输入内容"
          v-model="queryParams.input3"
          class="input-with-select"
        >
          <el-select
            style="width: 80px"
            v-model="queryParams.value2"
            slot="prepend"
            :placeholder="$t('请选择')"
          >
            <el-option label="SKU" :value="1"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- *************************************搜索区end************************************* -->

    <el-table
    :height="calTableHeight()"
      v-loading="loading"
        ref="TableRef"  :data="tableData"
      row-key="menuId"
    >
      <!-- 库位号 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        :label="$t('库位号')"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- sku -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="sku"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 图片 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        :label="$t('图片')"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 中文名 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        :label="$t('中文名')"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 库存总数 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="库存总数"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 库存容量 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="库存容量"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 库存状态 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="库存状态"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 箱规 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="箱规"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 初始容量 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="初始容量"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 入库量 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="入库量"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 出库量 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="出库量"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 所属者 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="所属者"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 库位备注 -->
      <el-table-column
        show-overflow-tooltip
        prop="nickName"
        label="库位备注"
        :show-overflow-tooltip="true"
        width="160"
      />
      <!-- 操作 -->
      <el-table-column fixed="right" :label="$t('操作')" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text">盘点</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listUser } from "@/api/system/user";

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: "storeList",
  data() {
    return {
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        /**筛选  默认全部 */
        status: 0,
        value2: 1,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      listUser(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.pageTotal = res.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null;
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null;
      });
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.status = 0;

      this.getList();
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
  },
};
</script>
